<template>
  <!--卫星地图开始-->
  <div id="allmap"></div>
  <!--卫星地图结束-->
</template>

<script>
import BMap from "BMap";
import BMAP_HYBRID_MAP from "BMAP_HYBRID_MAP";
import BMAP_ANIMATION_BOUNCE from "BMAP_ANIMATION_BOUNCE";
import EZUIKit from "ezuikit-js";
/* import { getAccessToken } from "@/api/ys7";*/
export default {
  name: "BaiduMap",
  props: {
    // 地图点位数组
    pointList: {
      type: Array,
      default: function() {
        return [];
      },
    },
  },
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.showMapFun(this.pointList);
  },
  methods: {
    changeView(point) {
      this.map.panTo(new BMap.Point(point[0], point[1]));
    },
    showMapFun(points) {
      const that = this;
      // 百度地图API功能
      that.map = new BMap.Map("allmap", {
        mapType: BMAP_HYBRID_MAP,
        enableMapClick: false,
      }); // 创建Map实例
      that.map.centerAndZoom(new BMap.Point(118.917077, 31.836182), 17); // 初始化地图,设置中心点坐标和地图级别
      that.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      // that.map.setMapStyle({ style: "light" });
      const myIcon = new BMap.Icon(
        require("../assets/img/monitor.png"),
        new BMap.Size(20, 25)
      );
      const myIconWarn = new BMap.Icon(
        require("../assets/img/map_warn.png"),
        new BMap.Size(20, 25)
      );
      // 创建Marker标注，使用图标
      points.forEach((item) => {
        const pt = new BMap.Point(item.x, item.y);
        if (item.type == 0) {
          const marker = new BMap.Marker(pt, {
            icon: item.type == 1 ? myIconWarn : myIcon,
          });
          // 将标注添加到地图
          that.map.addOverlay(marker);
          const label = new BMap.Label(item.title, {
            offset: new BMap.Size(20, -20),
          });
          // 自定义文本标注样式
          label.setStyle({
            color: item.type == 0 ? "#0d85ff" : "red",
            borderRadius: "4px",
            borderColor: "transparent",
            backgroundColor: "#fff",
            padding: "0px 2px",
            fontSize: "10px",
            fontFamily: "微软雅黑",
          });
          marker.setLabel(label);
          // 创建视频窗口
          const sContent =
            `<p class='camera-info'>` +
            item.content +
            `</p><div id='video-container' data-myurl='` +
            item.url +
            `'></div>`;
          const infoWindow = new BMap.InfoWindow(sContent, {
            title: item.title, //标题
            width: 620, //宽度
            height: 460, //高度
          });
          var player = null;
          // marker添加点击事件
          marker.addEventListener("click", function() {
            this.openInfoWindow(infoWindow);
            const param = {
              autoplay: true,
              id: "video-container",
              template: "simple", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
              width: 620,
              height: 400,
            };
            param.accessToken = JSON.parse(
              localStorage.getItem("ys7")
            ).accessToken;
            param.url = document.getElementById(
              "video-container"
            ).dataset.myurl;
            player = new EZUIKit.EZUIKitPlayer(param);
            //player.play();
            console.log("player", player);
          });
          infoWindow.addEventListener("close", function() {
            player.stop();
            player = null;
          });
          if (item.type == 1) {
            marker.setAnimation(BMAP_ANIMATION_BOUNCE);
          }
        } else {
          const option = {
            position: pt,
            offset: new BMap.Size(-25, -25),
          };
          const valueLabel = new BMap.Label(
            "<div class='classScale' : ''} style='display:flex; justify-content: center; align-items: center; width:40px;height:40px;border-radius:50%; opacity: 1;'></div></div><div class='classScale1' : ''} style='position:relative; top: -40px;width:40px;height:40px;border-radius:50%; opacity: 1;'>",
            option
          );
          valueLabel.setStyle({
            border: "none",
            backgroundColor: "RGBA(0,0,0,0)",
          });
          that.map.addOverlay(valueLabel);
          // 创建窗口
          let sContent;
          if (item.img) {
            sContent =
              `<div class='camera-info'>` +
              item.content +
              `</div><img class='warn-img' src='` +
              item.img +
              `'/>`;
          } else {
            sContent =
              `<div class='camera-info warn-info'>` + item.content + `</div>`;
          }
          const infoWindow = new BMap.InfoWindow(sContent, {
            title: item.title, //标题
            width: 600, //宽度
            height: item.img ? 290 : 150, //高度
          });
          // label添加点击事件
          valueLabel.addEventListener("click", function() {
            that.map.openInfoWindow(infoWindow, pt);
          });
        }
      });
    },
  },
};
</script>

<style>
#allmap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "微软雅黑";
  z-index: 10;
}
.camera-info {
  font-size: 14px;
  color: #fff;
  padding: 5px 10px;
  word-break: break-all;
}
.anchorBL {
  display: none;
}
/*地图标题*/
.BMap_bubble_title {
  color: white;
  font-size: 13px;
  font-weight: bold;
  text-align: left;
  padding-left: 5px;
  padding-top: 5px;
  border-bottom: 1px solid gray;
  background-color: #0066b3;
}
/* 消息内容 */
.BMap_bubble_content {
  background-color: #000;
  padding: 0;
  height: 100% !important;
}
/* 内容 */
.BMap_pop div:nth-child(9) {
  top: 35px !important;
  border-radius: 7px;
}
/* 左上角删除按键 */
.BMap_pop img {
  top: 45px !important;
  left: 599px !important;
  display: none;
}
.BMap_top {
  display: none;
}
.BMap_bottom {
  display: none;
}
.BMap_center {
  display: none;
}
.BMap_center + div {
  display: none;
}
/* 隐藏边角 */
.BMap_pop div:nth-child(1) div {
  display: none;
}
.BMap_pop div:nth-child(3) {
  display: none;
}
.BMap_pop div:nth-child(7) {
  display: none;
}

@keyframes scale {
  0% {
    transform: scale(0);
    background: #ff0000;
  }
  10% {
    transform: scale(0.1);
    background: #ff0000;
  }
  20% {
    transform: scale(0.2);
    background: #ff0000;
  }
  30% {
    transform: scale(0.3);
    background: #ff0000;
  }
  40% {
    transform: scale(0.4);
    background: #ff0000;
  }
  50% {
    transform: scale(0.5);
    background: #ff0000;
  }
  60% {
    transform: scale(0.6);
    background: #ff9c9c;
  }
  70% {
    transform: scale(0.7);
    background: #ffcece;
  }
  80% {
    transform: scale(0.8);
    background: #ffeeee;
  }
  100% {
    transform: scale(0.9);
    background: #fff2f2;
    opacity: 0;
  }
}

@keyframes scale1 {
  0% {
    transform: scale(0);
    background: #ff0000;
  }
  10% {
    transform: scale(0.1);
    background: #ff0000;
  }
  20% {
    transform: scale(0.2);
    background: #ff0000;
  }
  30% {
    transform: scale(0.3);
    background: #ff0000;
  }
  40% {
    transform: scale(0.4);
    background: #ff0000;
  }
  50% {
    transform: scale(0.5);
    background: #ff0000;
  }
  60% {
    transform: scale(0.6);
    background: #ff7d7d;
  }
  70% {
    transform: scale(0.7);
    background: #ffcece;
  }
  80% {
    transform: scale(0.8);
    background: #ffeeee;
  }
  100% {
    transform: scale(0.9);
    background: #fff2f2;
    opacity: 0;
  }
}

.classScale {
  animation: scale 3s linear infinite normal;
}
.classScale1 {
  animation: scale1 3s 1.5s linear infinite normal;
}
.BMap_pop img.warn-img {
  position: relative !important;
  top: 0px !important;
  left: 0px !important;
  display: block !important;
  width: auto !important;
  height: 200px !important;
  margin: 10px;
}
</style>
